<template>
    <el-form :model="configData" :rules="rules" ref="configForm" label-width="80px" v-loading="loading" class="demo-ruleForm">
        <el-form-item label="重复周期" prop="cycle">
            <el-radio-group v-model="configData.cycleType" size="small" class="left-btn">
                <el-radio-button label="1">一次</el-radio-button>
                <el-radio-button label="2">每小时</el-radio-button>
                <el-radio-button label="3">每天</el-radio-button>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="允许发送" prop="allowTime">
            <div class="flex-row">
                <el-time-picker
                        size="small"
                        style="width: 115px"
                        v-model="configData.beginTime"
                        placeholder="开始时间">
                </el-time-picker>
                <span class="time-unit">至</span>
                <el-time-picker
                        size="small"
                        :clearable="false"
                        style="width: 115px"
                        v-model="configData.endTime"
                        placeholder="结束时间">
                </el-time-picker>
            </div>
        </el-form-item>
        <el-form-item v-if="configData.cycleType !== '1'" label="发送时间" prop="sendTime">
            <div class="flex-row flex-item">
                <el-select v-if="configData.cycleType === '3'" size="small" style="width: 115px" v-model="configData.hours" placeholder="小时">
                    <el-option
                            v-for="i in 24"
                            :key="i"
                            :label="`${i - 1}`"
                            :value="`${i - 1}`">
                    </el-option>
                </el-select>
                <span v-if="configData.cycleType === '3'" class="time-unit">时</span>
                <el-select v-if="configData.cycleType !== '1'" size="small" style="width: 115px" v-model="configData.minutes" placeholder="分钟">
                    <el-option
                            v-for="i in 60"
                            :key="i - 1"
                            :label="`${i - 1}`"
                            :value="`${i - 1}`">
                    </el-option>
                </el-select>
                <span v-if="configData.cycleType !== '1'" class="time-unit">分</span>
            </div>
        </el-form-item>
        <el-form-item v-if="configData.cycleType !== '1'" label="发送次数" prop="times">
            <el-input style="width: 260px" placeholder="发送次数上限" size="small" @change="numChange('sendNum')" v-model="configData.sendNum"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
<!--            <el-input style="width: 260px" placeholder="请输入手机号" size="small" @change="numChange('phone')" maxlength="11" v-model="configData.phone"></el-input>-->
            <el-select size="small" style="width: 260px" filterable v-model="configData.phone" placeholder="请输入手机号">
                <el-option
                        v-for="item in whiteList"
                        :key="item.phone"
                        :label="item.username +' '+ item.phone"
                        :value="item.phone">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <div class="flex-row">
                <div class="flex1"></div>
                <el-button size="small" @click="cancel">取 消</el-button>
                <el-button size="small" type="primary" @click="saveConfig">保存配置</el-button>
            </div>
        </el-form-item>
    </el-form>
</template>

<script>
import moment from 'moment'
export default {
  name: 'alarmConfig',
  props: {
    level: {
      type: String,
      default: '1'
    },
    initData: {
      required: true
    },
    whiteList: {
      type: Array,
      required: []
    }
  },
  data() {
    return {
      loading: false,
      // levelName: {
      //     5: '一级告警',
      //     2: '二级告警',
      //     3: '三级告警'
      // },
      configData: {
        severity: this.level,
        cycleType: '1',
        hours: '1',
        minutes: '1',
        phone: '',
        sendNum: 10,
        beginTime: '00:00:00',
        endTime: '23:59:59'
      },
      rules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ],
        allowTime: [
          { validator: (rule, value, callback) => {
            const {beginTime, endTime} = this.configData
            if (beginTime && endTime) {
              callback();
            } else {
              return callback(new Error('请输入允许发送通知的时间段'));
            }
          }, trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    initData: {
      handler(N) {
        const {beginTime, endTime} = N
        this.configData = { ...N,
          beginTime: beginTime ? moment().format('YYYY-MM-DD') + ' ' + beginTime : moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
          endTime: endTime ? moment().format('YYYY-MM-DD') + ' ' + endTime : moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')
        }
      },
      immediate: true
    }
  },
  methods: {
    cancel() {
      this.$emit('close')
    },
    numChange(key) {
      this.$nextTick(() => {
        const val = Math.abs(parseInt(this.configData[key], 10)) || 0
        this.configData[key] = val > 10000 ? 10000 : val
      })
    },
    saveConfig() {
      this.$refs.configForm.validate((valid) => {
        if (valid) {
          const {beginTime, endTime} = this.configData
          this.loading = true
          this.$http.post('/alarm/data/saveOrUpdateStrategy', {
            ...this.configData,
            beginTime: moment(beginTime).format('HH:mm:ss'),
            endTime: moment(endTime).format('HH:mm:ss')
          }).then(() => {
            this.$TZmessage.success('保存成功')
          }).catch(err => {
            this.$TZmessage.error(err.msg || '保存数据失败')
          }).finally(() => {
            this.loading = false
          })
        } else {
          return false;
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
    .time-unit {
        padding: 0 10px;
    }
</style>